import { useNavigate } from "react-router-dom"

import { Card, Form, Input, Checkbox, Button, message } from "antd"
import logo from "@/assets/logo.png"

import "./index.scss"

import { observer } from "mobx-react"
import { useStore } from "@/store/index"

export default observer(function Login() {
  const navigate = useNavigate()

  const [form] = Form.useForm()
  const { authStore } = useStore()

  const defaultValue = {
    mobile: "13811111111",
    code: "246810",
    remember: false
  }

  const onFinish = async value => {
    if (!value.remember) {
      message.error("请勾选「用户协议」和「隐私条款」")
    } else {
      await authStore.login({ ...value })
      message.destroy()
      message.success("登录成功")
      navigate("/", { replace: true })
    }
  }
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />

        <Form
          form={form}
          wrapperCol={{ span: 24 }}
          initialValues={defaultValue}
          validateTrigger={["onBlur", "onChange"]}
          onFinish={onFinish}
        >
          <Form.Item
            name="mobile"
            rules={[
              { required: true, message: "请输入手机号" },
              { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", validateTrigger: "onBlur" }
            ]}
          >
            <Input placeholder="请输入手机号" maxLength={11} />
          </Form.Item>

          <Form.Item
            name="code"
            rules={[
              { required: true, message: "请输入密码" },
              { len: 6, message: "请输入6位密码", validateTrigger: "onBlur" }
            ]}
          >
            <Input.Password placeholder="请输入密码" maxLength={6} />
          </Form.Item>

          <Form.Item name="remember" valuePropName="checked">
            <Checkbox className="login-checkbox-label">我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
          </Form.Item>

          <Form.Item>
            <Button type="primary" size="large" block htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
})
